<template>
  <div class="column" :style="{height:centerHeight + 'px'}">
    <div class="panel bar"
         :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}"
    >
      <h2>产业总览</h2>
      <echart5 ref="echart5" class="chart"></echart5>
      <div class="panel-footer"></div>
    </div>
    <div class="panel bar"
         :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)',width:partWidth+'px'}"
    >
      <h2>企业排名</h2>
      <swiper2 ref="swiperBox" :dataList2="dataList5" v-if="dataList5.length > 0"></swiper2>
      <div class="panel-footer"></div>
    </div>
    <div class="panel line"
         :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)',width:partWidth+'px'}"
    >
      <h2>企业总览</h2>
      <echart6 class="chart" ref="echart6" v-if="dataList2.name.length > 0"></echart6>
      <div class="no-data" v-else>
        <img src="../../assets/images/no-data.png" alt="">
        <p>暂无数据</p>
      </div>
      <div class="panel-footer"></div>
    </div>
    <div class="panel line"
         :style="{height:panelHeight+'px',background:'url('+ panel_img + ') rgba(255, 255, 255, 0.04)'}"
    >
      <h2>人才总览</h2>
      <echart8 class="chart"></echart8>
      <!--      <echart7 ref="router7" v-if="dataList3.length > 0" :dataList3="dataList3"   class="chart"></echart7>-->
      <!--      <div class="no-data" v-else>-->
      <!--        <img src="../../assets/images/no-data.png" alt="">-->
      <!--        <p>暂无数据</p>-->
      <!--      </div>-->
      <div class="panel-footer"></div>
    </div>
  </div>
</template>

<script>
import echart5 from '../../components/echarts/echart5'
import echart6 from '../../components/echarts/echart6'
import echart8 from '../../components/echarts/echart8'
import echart2_1 from '../../components/echarts/echart2/index1'
import { getStatistics1, getStatistics2 } from '@/api/system/marks'
import { getCompositeIndex } from '../../api/system/city'
import swiper2 from './swiper2'
import { selectRanking } from '../../api/system/ranking'

export default {
  name: 'left_part2',
  components: {
    echart5,
    echart6,
    echart8,
    swiper2,
    echart2_1
  },
  props: {
    centerHeight: {
      type: Number,
      default: 0
    },
    partWidth: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      panel_img: require('../../assets/images/line(1).png'),
      //块高度
      panelHeight: 0,
      dataList1: {
        name: [],
        value: []
      },
      dataList2: {
        name: [],
        value: []
      },
      dataList3: [],
      dataList5: [],
      noData2: false
    }
  },
  created() {
    this.panelHeight = this.centerHeight / 4
    this.getStatistics()
  },
  mounted() {
    // this.getStatistics()
  },
  methods: {
    getStatistics() {
      const cityCode = localStorage.getItem('cityCode')
      getStatistics1({ cityCode }).then(res => {
        res.data.forEach(item => {
          this.dataList1.name.push(item.categoryName)
          this.dataList1.value.push(item.amount)
          this.dataList2.name.push(item.categoryName)
          this.dataList2.value.push(item.amount)
        })
        // this.$nextTick(()=>{
        //   this.$refs.swiperBox.initSwiper()
        // })
        this.$nextTick(() => {
          this.$refs.echart6.initEcharts1(this.dataList2)
        })
      })
      selectRanking(cityCode).then(res => {
        this.dataList5 = res
        console.log(this.dataList5, 'dataList2dataList2')
      })
      getCompositeIndex(cityCode).then(res => {
        const data = res.rows[0]
        this.dataList1 = [data.scaleIndex, data.structureIndex,
          data.worthIndex, data.innovationIndex, data.policyIndex, data.charmIndex]
        setTimeout(() => {
          this.$nextTick(() => {
            this.$refs.echart5.initEcharts2(this.dataList1, data.developmentIndex)
          }, 2000)
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import './css/left_part';
</style>

